<template>
  <van-popup v-model:show="showLeft" closeable position="left"
    :style="{ width: '75%', height: '100%', background: 'rgb(31, 35, 61)' }">
    <div class="main">
      <div class="title">{{ t('selectombination') }}</div>
      <div class="list">
        <div class="item" v-for="(item, index) in optionalList" :key="index">
          <van-checkbox v-model="item.check">{{ item.listName }}</van-checkbox>
        </div>
      </div>
      <div class="submit-div">
        <van-button class="but" type="default" @click="openGroupEditOrAdd">{{ t('createDustom') }}</van-button>
        <van-button class="but" type="primary" @click="finish">{{ t('Finish') }}</van-button>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, onMounted, defineExpose } from 'vue'
import { _itemUserOptionalList, _itemUserOptionaSaveItem, _isItemHasAdd, _removeItem } from '@/service/quotes.api'
import { useRouter } from "vue-router";
import { showToast } from 'vant';
import { _collect, _deleteCollect } from '@/service/cryptos.api'
import { useI18n } from 'vue-i18n'
const emits = defineEmits(['updateItem'])
const router = useRouter()
const optionalList = ref([])
const { t } = useI18n()
const props = defineProps({
  isCollect: {
    type: Boolean,
    default: false
  },
})
let showLeft = ref(false)
let symbolValue = ref('')
onMounted(async () => {
  getMyCoinsList()
})

const itemClick = (a) => {
  emits('click-item', props.item)
  // console.log(1111)
}
//获取我的自选列表
const getMyCoinsList = () => {
  let params = {}
  _itemUserOptionalList(params).then(data => {
    data.list.map((item) => {
      item.check = false
      optionalList.value.push(item)
    })
  })
}
//打开弹窗
const openCurrency = (symbol) => {
  showLeft.value = true
  symbolValue.value = symbol
  if (props.isCollect) {
    detectionItem()
  }
}
//跳转添加分组
const openGroupEditOrAdd = () => {
  router.push('/optional/groupAdd')
}
//完成
const finish = () => {
  let checkList = optionalList.value.filter((item) => {
    return item.check
  })
  if (!props.isCollect) {
    if (checkList.length === 0) {
      showToast(t('PleaseAdd'))
      return
    }
    checkList.map((item) => {
      let obj = {
        listId: item.listId,
        symbol: symbolValue.value
      }
      if (item.listId == 0) {
        _collect(symbolValue.value).then((res) => {
          showToast(t('添加成功'))
          emits('updateItem')
          detectionItem()
          showLeft.value = false
        })
      } else {
        _itemUserOptionaSaveItem(obj).then((res) => {
          showToast(t('添加成功'))
          emits('updateItem')
          detectionItem()
          showLeft.value = false
        })
      }
    })
  } else {
    if (checkList.length === 0) {
      showToast(t('PleaseDelete'))
      return
    }
    checkList.map((item) => {
      let obj = {
        listId: item.listId,
        symbol: symbolValue.value
      }
      if (item.listId == 0) {
        _deleteCollect(symbolValue.value).then((res) => {
          showToast(t('successfullyDeleted'))
          emits('updateItem')
          detectionItem()
          showLeft.value = false
        })
      }
      _removeItem(obj).then((res) => {
        showToast(t('successfullyDeleted'))
        emits('updateItem')
        detectionItem()
        showLeft.value = false
      })
    })
  }
}
//检查币种是否存在自选
const detectionItem = () => {
  optionalList.value.map((item) => {
    let obj = {
      listId: item.listId,
      symbol: symbolValue.value
    }
    _isItemHasAdd(obj).then((data) => {
      item.check = data
    })
  })
}
defineExpose({
  openCurrency
});

</script>
<style lang="scss" scoped>
.main {
  .title {
    padding: 14px 20px;
    font-size: 16px;
  }

  .submit-div {
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;

    .but {
      width: 120px;
    }
  }

  .list {
    padding: 0 20px;
    color: $text_color;

    .item {
      padding: 10px 0;
    }

    :deep(.van-checkbox__label) {
      font-size: 16px !important;
      color: $text_color;
    }
  }
}
</style>